<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/kendocommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>课程计划与完成进度</title>
    <meta charset="utf-8">
    <style>
    	table{font-size:14px}
    </style>
    <script>
        $(document).ready(function() {
			

        	var d=new Date();
        	var endTime = d.format("yyyy-MM-dd"); 
        	var months = d.getMonth()-1;
        	d.setMonth(months);
        	var beginTime=d.format("yyyy-MM-dd"); 
        	
        	
        	$("#toolbar").kendoToolBar({
	            resizable: false,
	            items: [
	            	{ type: "separator" },
	                { template: "<label>时间:</label><input name='beginTime' value="+beginTime+" id='beginTime'>" },
	                { template: "<label>-</label><input name='endTime' value="+endTime+" id='endTime'>" },  
	                { template: "<label>时间类型</label><input name='timeType' id='timeType'>" },
	                
	                
	                //{ template: timeType },
	                
	                { type: "separator" },
	                { type: "button", text: "查询",click: coursePlan }
	            ]
	        });
			
			var selectItem=new Object();
			
			$("#timeType").kendoComboBox({
		     	dataValueField: "value",
		        dataTextField: "name",
		        dataSource:[{name:"年",value:"year"},
		        			{name:"月",value:"month"},
		        			{name:"季",value:"season"}
		        			],
		        //dataSource: dataSourceap,
		        select: function(e) {
					var value = this.value();
    				var item = e.item;  							      					    
					selectItem=e.sender.dataItem(item);
					//console.log(selectItem);
				}
			});
                
			
			//产生时间下拉
		var timeType = function(dataItem){
			return "<label>时间类型</label><select id='type' name='type'>"+
                		"<option value ='year' selected='selected'>年</option>"+
                		"<option value ='month'>月</option>"+
                		"<option value ='season'>季</option>"+
		            "</select>";
		}
			
			
	        
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "${path}/oaReport/coursePlan",
                        dataType: "json",
                        data: function() {
					        return {
					         	beginTime:$('#beginTime').val(),
					         	endTime:$('#endTime').val(),
					         	type:selectItem.value //$('#type').val()
					        };
					    }
                    }
                },
                //group: [{field: "deptName"}],
                serverPaging: true,
                pageSize: 15,
                serverFiltering: true,
                schema: {
                	data:"data",
               		total:"total"
                }
            });
            
            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                selectable: "multiple row",
                allowCopy: true,
                groupable: {
                    messages: {
                      empty: "将列拖拽到此处进行分类查看"
                    }
                },
                editable: "popup",
                columns: [
                	//{ field:"id", template: "<input type='checkbox' id='#:id#' />",width: "120px",headerTemplate: '<input type="checkbox" id="check-all" />'},
                   	
                   	{ field:"teacher_name", title: "教师名",width: "120px"},
                    { field:"plan", title:"计划授课",  width: "120px"},//format: "{0:c}",locked: true,
                    { field:"real", title: "实际授课比例",width: "120px"},
                    { field:"index", title: "排名",width: "80px"},
                    { field:"time", title: "时间",width: "150px"}
                    
                    
                    //{ command: [{name:"editrow",text:"<span class='k-icon k-edit'></span>查看",click:queryCustomerInfo,buttonType:"ImageAndText"}], title: "操作", width: "100px" }
                    ]
            });
            
            $('#grid').css("height",document.body.clientHeight-40);
            $("#beginTime").kendoDatePicker({format: "yyyy-MM-dd"});
            $("#endTime").kendoDatePicker({format: "yyyy-MM-dd"});
            
            
            
            
            
		});
		
		
		
		var coursePlan = function(e){//查询
			$("#grid").data("kendoGrid").dataSource.fetch();
			$("#grid").data("kendoGrid").dataSource.page(1);
		}
		
		var toolbarTemp = function(dataItem){
			return "<label>时间:</label><input name='querydate' id='querydate' class='k-textbox'>";
		}
		
		
		
		var queryCustomerInfo = function(e){
			var grid = $("#grid").data("kendoGrid");
			e.preventDefault();
            var data = grid.dataItem($(e.currentTarget).closest("tr"));
            setFormData(data);
			$.fancybox($("#inlineForm"));
		    //var dInfo = dialog({
			//	title: '消息',
			//	content: document.getElementById("inlineForm")
		    //})
			//dInfo.showModal();
		}
		
		var setFormData = function(data){
			$('#baby_name').val(data.baby_name);
		}
		
    </script>
</head>
<body>
	<div id="toolbar" style="margin:2px"></div>
    <div id="grid" style="margin:2px;font-size:10px"></div>
    
    
    <div style="display: none;">		
		<div id="inlineForm" style="width:600px;overflow:auto;">
			<table>
                <tr>
                    <td style="width:100px;padding:5px">
                        <span  style="width:90px">客户名字</span>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="标题" name="baby_name" id="baby_name"
                    		 style="width:200px" class="k-textbox" >
                    </td>
                    <td colspan="3" style="padding:5px" style="width:320px">
                    </td>
                </tr>
                
                <tr>
                    <td style="padding:5px">
                        <span  style="width:90px">开始日期</span>
                    </td>
                    <td style="padding:5px">
                        <input name="starttime" id="starttime" style="width:200px" class="k-textbox">
                    </td>
                    
                    <td style="padding:5px">
                        <span  style="width:90px">完成时间</span>
                    </td>
                    <td style="padding:5px">
                        <input style="width:200px" name="endtimes" id="endtimes" class="k-textbox">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <span  style="width:90px">内容</span>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="content" id="content" style="width:480px;height:200px" class="k-textbox"></textarea>
                    </td>
                </tr>
            </table>
		</div>
	</div>
    
</body>
</html>
